<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>marker</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<!--加载样式表-->
		<link rel="stylesheet" href="demo-center.css"/>
		<!--加载地图js-->
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=80dcce144694739ec6f22a2e9d0bfb0f&plugin=AMap.Driving"></script>
	</head>
	<body>
		<div class="mapBox">
			<!--地图容器-->
			<div id="container"></div>
			<div id="panel"></div>
		</div>
		
		<script>
		//基本地图加载
		var map = new AMap.Map("container", {
			resizeEnable: true,
			//center: [116.397428, 39.90923],//地图中心点
			zoom: 13 //地图显示的缩放级别
		});
		//构造路线导航类
		var driving = new AMap.Driving({
			map: map,
			panel: "panel"
		}); 
		// 根据起终点名称规划驾车导航路线
		driving.search([
			{keyword: '北京市地震局(公交站)',city:'北京'},
			{keyword: '亦庄文化园(地铁站)',city:'北京'}
		], function(status, result) {
			// result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
			if (status === 'complete') {
				log.success('绘制驾车路线完成')
			} else {
				log.error('获取驾车数据失败：' + result)
			}
		});
		
		// 缩放地图到合适的视野级别
		// 你有了这个方法不设置中心点也是可以的
		map.setFitView([ polygon ])
		</script>
		<style>
			.mapBox {
				width: 800px;
				height: 600px;
				position: relative;
			}
			html, body, #container {
				height: 100%;
				width: 100%;
			}
			#panel {
				position: fixed;
				background-color: white;
				max-height: 90%;
				overflow-y: auto;
				top: 10px;
				right: 10px;
				width: 280px;
			}
			#panel .amap-call {
				background-color: #009cf9;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}
			#panel .amap-lib-driving {
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				overflow: hidden;
			}
		</style>
	</body>
</html>
